<template>
	<view class="centerContainer">
		<view class="header" v-if="!userInfo.nickName">
			<image  @click="toLogin" src="../../static/images/center/avatar.76a75b8f17.png" mode=""></image>
			<text >点击头像登录</text>
		</view>
		<view class="header"  v-if="userInfo.nickName">
			<image :src="userInfo.avatarUrl" mode=""></image>
			<text >{{userInfo.nickName}}</text>
		</view>
		<view class="order moreIcon">
			<text>我的订单</text>
			<text>全部订单</text>
		</view>
		<view class="serveList flex-row">
			<view class="item flex-col">
				<view class="icon"></view>
				<text>待付款</text>
			</view>
			<view class="item flex-col">
				<view class="icon"></view>
				<text>待收货</text>
			</view>
			<view class="item flex-col">
				<view class="icon"></view>
				<text>退换修</text>
			</view>
		</view>
		<!--  -->
		<view class="optionContainer">
			<view class="option-panel">
				<view class="row member"><view class="title moreIcon">会员中心</view></view>
				<view class="row wallet"><view class="title moreIcon">我的优惠</view></view>
			</view>
			<view class="option-panel">
				<view class="row service"><view class="title moreIcon">服务中心</view></view>
				<view class="row mihome"><view class="title moreIcon">小米之家</view></view>
			</view>
			<view class="option-panel">
				<view class="row fcode"><view class="title moreIcon">我的F码</view></view>
				<view class="row gift"><view class="title moreIcon">礼物码兑换</view></view>
			</view>
			<view class="option-panel">
				<view class="row"><view class="title moreIcon">设置</view></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo:{},
		};
	},
	mounted() {
		wx.showTabBar({
			animation:true
		})
		this.userInfo = wx.getStorageSync('userInfo_key');
	},
	methods:{
		toLogin(){
			wx.navigateTo({
				url:'/pages/login/login'
			})
		}
	}
};
</script>

<style lang="stylus">
.flex-row
	display flex
	justify-content space-around
	align-items center
.flex-col
	display flex
	flex-direction column
	text-align center
	align-items centers
.moreIcon
	position relative
.moreIcon::after
	content ''
	position absolute
	right 16px
	top 50%
	width 10px
	height 10px
	border-left 1px solid currentColor
	border-top 1px solid currentColor
	-webkit-transform translateY(-50%) rotate(135deg)
	transform translateY(-50%) rotate(135deg)
.centerContainer
	height 100%
	background-color #F5F5F5
	.header
		display flex
		align-items center
		height 166rpx
		width 100%
		box-sizing border-box
		padding-left 38rpx
		background url('https://m.mi.com/static/img/bg.63c8e19851.png') center #f37d0f
		background-size cover
		// image
		// width 100rpx
		// height 100rpx
		image
			width 100rpx
			height 100rpx
			overflow hidden
			box-sizing border-box
			border-radius 100%
			border 3px solid hsla(0, 0%, 100%, 0.4)
			text-align center
			margin-right 23rpx
		text
			color #fff
			font-size 32rpx
	.order
		display flex
		justify-content space-between
		align-items center
		height 80rpx
		padding 0 32rpx
		background-color #fff
		border-bottom 2rpx solid #D9D9D9
		position relative
		text
			font-size 27rpx
			margin-right 30rpx
			&:nth-child(1)
				font-size 30rpx
				color #595959
	.serveList
		height 176rpx
		padding 0 83rpx
		background-color #fff
		margin-bottom 20rpx
		.item
			font-size 24rpx
			.icon
				width 50rpx
				height 50rpx
				margin-bottom 16rpx
			&:nth-child(1)
				.icon
					background url('') no-repeat center 0
					background-size cover
			&:nth-child(2)
				.icon
					background url('') no-repeat center 0
					background-size cover
			&:nth-child(3)
				.icon
					background url('') no-repeat center 0
					background-size cover
					
	.optionContainer
		height 836rpx
		background-color #F5F5F5
		.option-panel
			background #fff
			font-size 30rpx
			margin-bottom 20rpx
			.row
				height 108rpx
				line-height 108rpx
				padding-left 116rpx
				background no-repeat 32rpx url('../../static/images/center/i-setting.fb9625b3f2.png')
				background-size 50rpx auto
				&:not(:first-child) .title
					border-top 2rpx solid rgba(0, 0, 0, 0.15)
				&.member
					background-image url('')
				&.wallet
					background-image url('')
				&.service
					background-image url('')
				&.mihome
					background-image url('')
				&.fcode
					background-image url('')
				&.gift
					background-image url('https://m.mi.com/static/img/i-gift.ece9aa1222.png')
</style>
